import React from 'react';
import { ExperimentRunFaultStatus } from '@api/entities';

const ProbeTitleIcon = (): React.ReactElement => {
  return (
    <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4 3.33333C3.82319 3.33333 3.65362 3.40357 3.5286 3.5286C3.40357 3.65362 3.33333 3.82319 3.33333 4V13.3333C3.33333 13.5101 3.40357 13.6797 3.5286 13.8047C3.65362 13.9298 3.82319 14 4 14H12C12.1768 14 12.3464 13.9298 12.4714 13.8047C12.5964 13.6797 12.6667 13.5101 12.6667 13.3333V4C12.6667 3.82319 12.5964 3.65362 12.4714 3.5286C12.3464 3.40357 12.1768 3.33333 12 3.33333H10.6667C10.2985 3.33333 10 3.03486 10 2.66667C10 2.29848 10.2985 2 10.6667 2H12C12.5304 2 13.0391 2.21071 13.4142 2.58579C13.7893 2.96086 14 3.46957 14 4V13.3333C14 13.8638 13.7893 14.3725 13.4142 14.7475C13.0391 15.1226 12.5304 15.3333 12 15.3333H4C3.46957 15.3333 2.96086 15.1226 2.58579 14.7475C2.21071 14.3725 2 13.8638 2 13.3333V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H5.33333C5.70152 2 6 2.29848 6 2.66667C6 3.03486 5.70152 3.33333 5.33333 3.33333H4Z"
        fill="#4F5162"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5.05715 1.05715C5.3072 0.807102 5.64634 0.666626 5.99996 0.666626H9.99996C10.3536 0.666626 10.6927 0.807102 10.9428 1.05715C11.1928 1.3072 11.3333 1.64634 11.3333 1.99996V3.33329C11.3333 3.68691 11.1928 4.02605 10.9428 4.2761C10.6927 4.52615 10.3536 4.66663 9.99996 4.66663H5.99996C5.64634 4.66663 5.3072 4.52615 5.05715 4.2761C4.8071 4.02605 4.66663 3.68691 4.66663 3.33329V1.99996C4.66663 1.64634 4.8071 1.3072 5.05715 1.05715ZM9.99996 1.99996H5.99996L5.99996 3.33329H9.99996V1.99996Z"
        fill="#4F5162"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M7.33337 7.33329C7.33337 6.9651 7.63185 6.66663 8.00004 6.66663H10.6667C11.0349 6.66663 11.3334 6.9651 11.3334 7.33329C11.3334 7.70148 11.0349 7.99996 10.6667 7.99996H8.00004C7.63185 7.99996 7.33337 7.70148 7.33337 7.33329Z"
        fill="#4F5162"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M7.33337 10.6667C7.33337 10.2985 7.63185 10 8.00004 10H10.6667C11.0349 10 11.3334 10.2985 11.3334 10.6667C11.3334 11.0349 11.0349 11.3333 10.6667 11.3333H8.00004C7.63185 11.3333 7.33337 11.0349 7.33337 10.6667Z"
        fill="#4F5162"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.66663 7.33329C4.66663 6.9651 4.9651 6.66663 5.33329 6.66663H5.33996C5.70815 6.66663 6.00663 6.9651 6.00663 7.33329C6.00663 7.70148 5.70815 7.99996 5.33996 7.99996H5.33329C4.9651 7.99996 4.66663 7.70148 4.66663 7.33329Z"
        fill="#4F5162"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.66663 10.6667C4.66663 10.2985 4.9651 10 5.33329 10H5.33996C5.70815 10 6.00663 10.2985 6.00663 10.6667C6.00663 11.0349 5.70815 11.3333 5.33996 11.3333H5.33329C4.9651 11.3333 4.66663 11.0349 4.66663 10.6667Z"
        fill="#4F5162"
      />
    </svg>
  );
};

const ProbePassedIcon = ({ phase }: { phase: ExperimentRunFaultStatus }): React.ReactElement => {
  return (
    <svg width={20} height={20} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z"
        fill={phase === ExperimentRunFaultStatus.RUNNING ? '#6B6D85' : '#42ab45'}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M7.58579 1.58579C7.96086 1.21071 8.46957 1 9 1H15C15.5304 1 16.0391 1.21071 16.4142 1.58579C16.7893 1.96086 17 2.46957 17 3V5C17 5.53043 16.7893 6.03914 16.4142 6.41421C16.0391 6.78929 15.5304 7 15 7H9C8.46957 7 7.96086 6.78929 7.58579 6.41421C7.21071 6.03914 7 5.53043 7 5V3C7 2.46957 7.21071 1.96086 7.58579 1.58579ZM15 3H9L9 5H15V3Z"
        fill={phase === ExperimentRunFaultStatus.RUNNING ? '#6B6D85' : '#42ab45'}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M15.7071 10.2929C16.0976 10.6834 16.0976 11.3166 15.7071 11.7071L11.7071 15.7071C11.3166 16.0976 10.6834 16.0976 10.2929 15.7071L8.29289 13.7071C7.90237 13.3166 7.90237 12.6834 8.29289 12.2929C8.68342 11.9024 9.31658 11.9024 9.70711 12.2929L11 13.5858L14.2929 10.2929C14.6834 9.90237 15.3166 9.90237 15.7071 10.2929Z"
        fill={phase === ExperimentRunFaultStatus.RUNNING ? '#6B6D85' : '#42ab45'}
      />
    </svg>
  );
};

const ProbeFailedIcon = ({ phase }: { phase: ExperimentRunFaultStatus }): React.ReactElement => {
  return (
    <svg width={20} height={20} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z"
        fill={phase === ExperimentRunFaultStatus.RUNNING ? '#6B6D85' : '#da291d'}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M7.58579 1.58579C7.96086 1.21071 8.46957 1 9 1H15C15.5304 1 16.0391 1.21071 16.4142 1.58579C16.7893 1.96086 17 2.46957 17 3V5C17 5.53043 16.7893 6.03914 16.4142 6.41421C16.0391 6.78929 15.5304 7 15 7H9C8.46957 7 7.96086 6.78929 7.58579 6.41421C7.21071 6.03914 7 5.53043 7 5V3C7 2.46957 7.21071 1.96086 7.58579 1.58579ZM15 3H9L9 5H15V3Z"
        fill={phase === ExperimentRunFaultStatus.RUNNING ? '#6B6D85' : '#da291d'}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M15.7071 10.2929C16.0976 10.6834 16.0976 11.3166 15.7071 11.7071L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071C7.90237 17.3166 7.90237 16.6834 8.29289 16.2929L14.2929 10.2929C14.6834 9.90237 15.3166 9.90237 15.7071 10.2929Z"
        fill={phase === ExperimentRunFaultStatus.RUNNING ? '#6B6D85' : '#da291d'}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.29289 10.2929C8.68342 9.90237 9.31658 9.90237 9.70711 10.2929L15.7071 16.2929C16.0976 16.6834 16.0976 17.3166 15.7071 17.7071C15.3166 18.0976 14.6834 18.0976 14.2929 17.7071L8.29289 11.7071C7.90237 11.3166 7.90237 10.6834 8.29289 10.2929Z"
        fill={phase === ExperimentRunFaultStatus.RUNNING ? '#6B6D85' : '#da291d'}
      />
    </svg>
  );
};

export { ProbeTitleIcon, ProbePassedIcon, ProbeFailedIcon };
